<template>
  <div>
      <header-cmp>
          <span>找回密码</span>
      </header-cmp>
      <div class="zt">
        <div class="yzm">
          <input type="text" v-model="pwd" placeholder="请重新设置密码" pattern="[0-9]*"/>
        </div>
        <div class="login" @click="login"><span>确认</span></div>
      </div>
  </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import { Toast } from 'mint-ui';
import axios from 'axios'
export default {
    data(){
        return{
            pwd:'',
            rules:{
            //手机号验证规则
                pwd:{
                    rule:/^\w{6,12}$/,
                    msg:'密码要在6-12位'
                }
            },
        }
    },
    methods:{
        login(){
            if(this.validate('pwd')) return
            axios({
            url:"/ajax/update",
            method:'POST',
            data:{
                phone:this.$route.params.userTel,
                pwd:this.pwd,
            }
            }).then(({data})=>{
                Toast(data.msg)
                this.$router.push({name:'login'})
            }).catch(err=>{
            console.log(err)
            })
        },
        validate(key){
            if(!this.rules[key].rule.test(this[key])){
            Toast(this.rules[key].msg)
            return true
            }
        },
    },
    components:{
        HeaderCmp
    }
}
</script>

<style lang="scss" scoped>
.phone{
  width: 100%;
  height: 30px;
  input{
    width: 100%;
    height: 30px;
  }
}
.yzm{
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 5%;
  margin-bottom: 5%;
  input{
    width: 100%;
    height: 30px;
  }
}
.login{
  width: 100%;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
</style>